<template>
    <div class="my-orders">
        <van-cell title="我的订单" value="查看全部订单"
                  title-class="my-orders-cell-title" value-class="my-orders-cell-value"
                  center clickable :border="false" to="/orders">
            <template #right-icon>
                <van-icon class="van-cell__right-icon" name="arrow" :size="13"/>
            </template>
        </van-cell>
        <van-tabbar :fixed="false" active-color="#7d7e80" class="my-orders-tabbar">
            <van-tabbar-item :to="awaitingPaymentUrl" :badge="awaitingPaymentCount ? awaitingPaymentCount : ''">
                <template #default>待付款</template>
                <template #icon>
                    <van-icon name="pending-payment" :size="22"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item :to="awaitingFulfillment" :badge="awaitingFulfillmentCount ? awaitingFulfillmentCount : ''">
                <template #default>待发货</template>
                <template #icon>
                    <van-icon name="send-gift-o" :size="22"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item :to="awaitingPickup" :badge="awaitingPickupCount ? awaitingPickupCount : ''">
                <template #default>待收货</template>
                <template #icon>
                    <van-icon name="logistics" :size="22"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item :to="completedUrl" :badge="completedCount ? completedCount : ''">
                <template #default>评价</template>
                <template #icon>
                    <van-icon name="comment-o" :size="22"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/refunds" :badge="refundingCount ? refundingCount : ''">
                <template #default>退款/售后</template>
                <template #icon>
                    <van-icon name="after-sale" :size="22"/>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import { Cell, Icon, Tabbar, TabbarItem } from "vant"
  import { order, security } from "@mall/api-services"
  import {
    awaitingFulfillmentStatuses,
    awaitingPaymentStatuses,
    awaitingPickupStatuses,
    awaitingRefundStatuses,
    completedStatuses,
  } from "@/utils/order"

  export default {
    name: "MyOrders",
    components: {
      [Cell.name]: Cell,
      [Icon.name]: Icon,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    },
    computed: {
      awaitingPaymentUrl() {
        return this.statusesRouteLocation(awaitingPaymentStatuses)
      },
      awaitingFulfillment() {
        return this.statusesRouteLocation(awaitingFulfillmentStatuses)
      },
      awaitingPickup() {
        return this.statusesRouteLocation(awaitingPickupStatuses)
      },
      completedUrl() {
        return this.statusesRouteLocation(completedStatuses)
      },
    },
    data() {
      return {
        awaitingPaymentCount: 0,
        awaitingFulfillmentCount: 0,
        awaitingPickupCount: 0,
        completedCount: 0,
        refundingCount: 0,
      }
    },
    created() {
      this.refreshCount()
    },
    methods: {
      statusesRouteLocation(statuses) {
        return {
          path: `/orders`,
          query: {
            statuses: _.join(statuses, ","),
          },
        }
      },
      countStatuses(statuses) {
        const customerId = security.SecurityUserHolder.getUserId()
        return new Promise((resolve, reject) => {
          order.OrderServiceV1.createOrderQuery()
            .customerId(customerId).statuses(statuses)
            .count().then(resolve).catch(reject)
        })
      },
      countRefundingStatuses(statuses) {
        const customerId = security.SecurityUserHolder.getUserId()
        return new Promise((resolve, reject) => {
          order.OrderServiceV1.createOrderQuery()
            .customerId(customerId).refundStatuses(statuses)
            .count().then(resolve).catch(reject)
        })
      },
      refreshCount() {
        this.countStatuses(awaitingPaymentStatuses).then(count => this.awaitingPaymentCount = count)
        this.countStatuses(awaitingFulfillmentStatuses).then(count => this.awaitingFulfillmentCount = count)
        this.countStatuses(awaitingPickupStatuses).then(count => this.awaitingPickupCount = count)
        this.countStatuses(completedStatuses).then(count => this.completedCount = count)
        this.countRefundingStatuses(awaitingRefundStatuses).then(count => this.refundingCount = count)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .my-orders {
        .my-orders-cell-title {
            font-weight: 700;
            font-size: 16px;
        }

        .my-orders-cell-value {
            font-size: 13px;
        }

        .my-orders-tabbar {
            padding: 9px 0;
        }
    }
</style>
